import { tableData } from '../../data'
import { onMounted, reactive, ref } from 'vue'
import type { PaginationProps, TableColumns } from '@/components/table'
import Empty from './empty.svg?component'

export function useColumns() {
  const dataList = ref([])
  const loading = ref(true)
  const columns: Array<TableColumns> = [
    {
      sortable: true,
      label: '序号',
      prop: 'id'
    },
    {
      sortable: true,
      label: '需求人数',
      prop: 'requiredNumber',
      filterMultiple: false,
      filterClassName: 'easy-table-filter',
      filters: [
        { text: '≥16000', value: 'more' },
        { text: '<16000', value: 'less' }
      ],
      filterMethod: (value, { requiredNumber }) => {
        return value === 'more'
          ? requiredNumber >= 16000
          : requiredNumber < 16000
      }
    },
    {
      sortable: true,
      label: '提问数量',
      prop: 'questionNumber'
    },
    {
      sortable: true,
      label: '解决数量',
      prop: 'resolveNumber'
    },
    {
      sortable: true,
      label: '用户满意度',
      minWidth: 100,
      prop: 'satisfaction',
      cellRenderer: ({ row }) => (
        <div class="flex justify-center w-full">
          <span class="flex items-center w-[60px]">
            <span class="ml-auto mr-2">{row.satisfaction}%</span>
          </span>
        </div>
      )
    },
    {
      sortable: true,
      label: '统计日期',
      prop: 'date'
    },
    {
      label: '操作',
      fixed: 'right',
      slot: 'operation'
    }
  ]
  /** 分页配置 */
  const pagination = reactive<PaginationProps>({
    pageSize: 10,
    currentPage: 1,
    layout: 'prev, pager, next',
    total: 0,
    align: 'center'
  })

  function onCurrentChange(page: number) {
    console.log('onCurrentChange', page)
    loading.value = true
    setTimeout(() => {
      loading.value = false
    }, 300)
  }

  onMounted(() => {
    dataList.value = tableData
    pagination.total = dataList.value.length
    loading.value = false
  })

  return {
    Empty,
    loading,
    columns,
    dataList,
    pagination,
    onCurrentChange
  }
}
